<template>
  <div class="app-container">

    <div class="filter-container">

      <QueryRole @queryRecords="getRecords" @reloadRecords="reload" :selectId="selectId" >
        <el-button @click="addShow" type="primary" class="filter-item">新增</el-button>
      </QueryRole>

    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      v-horizontal-scroll="'always'"
      @selection-change="handleSelectionChange"
    >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="id" label="ID" min-width="80" />
    <el-table-column prop="name" label="角色名称" min-width="120" />
    <el-table-column prop="permission_names" label="权限" min-width="400" />
    <el-table-column prop="beizhu" label="备注" min-width="150" />
    <el-table-column prop="created_at" label="创建时间" min-width="160" />
    <el-table-column fixed="right" label="操作" min-width="100">
      <template slot-scope="scope">
				<el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
			</template>
    </el-table-column>
    </el-table>


    <MyPagination @changeSize="handleSizeChange" @changePage="handlePageChange" :pagination="pagination"></MyPagination>

    <AddRoleDialog @success="addSuccess" @cancelDialog="addCancel" :dialogFormVisible="addDialogFormVisible" :record="record"></AddRoleDialog>

  </div>
</template>

<script>

import { myGet, myPost } from '@/utils/myUtils'
import QueryRole from "./QueryRole";
import AddRoleDialog from "./AddRoleDialog";

const urlLst = '/guard/rbac/role/lst'

export default {

  components: {
    QueryRole,
    AddRoleDialog
  },

  data() {
    return {
      host: process.env.VUE_APP_HOST,
      addDialogFormVisible: false,
      record: {},
      selectId: [],
      pagination: {
        total: 0,
        page: 1,
        pageSize: 50,
      },
      list: [],
      listLoading: false,
    }
  },

  methods: {

    handleEdit(index, row) {
      this.record = row
      this.addDialogFormVisible = true
    },

    addShow(){
      this.record = {}
      this.addDialogFormVisible = true
    },
    addCancel(val){
      this.addDialogFormVisible = val
    },

    addSuccess(val){
      this.addDialogFormVisible = val
      this.reload()
    },
    reload(){
      Object.assign(this.$data.pagination, this.$options.data().pagination)
      this.getRecords()
    },
    getRecords(query={}) {
      this.listLoading = true;
      let params = Object.assign(query, this.pagination)
      myGet(urlLst, params).then((res) => {
        this.listLoading = false;
        if (res.status) {
          this.list = res.data.records
          this.pagination.total = res.data.total
        }
      })
    },
    handlePageChange(val) {
      this.pagination.page = val
      this.getRecords();
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getRecords()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getRecords();
    },
    handleSelectionChange(val) {
      this.selectId = [];
      val.forEach(item => {
        this.selectId.push(item.id)
      })
    }
  },
  mounted() {
    this.getRecords();
  },
}
</script>


